<template>
  <div class="pay">
    <!-- 标题 -->
    <el-row class="header">
      <el-col :span="2" class="headerImg">
        <img src="../assets/left.png" alt />
      </el-col>
      <el-col :span="22" class="headerTitle">{{title}}</el-col>
    </el-row>
    <!-- 支付结果 -->
    <el-row :gutter="20" class="payres">
      <el-col :span="4" :offset="10">
        <img src="../assets/payres.png" alt class="payImg" />
      </el-col>
    </el-row>
    <el-row  :gutter="20" class="lookmore">
      <el-col :span="10" :offset="7" class="lookbtn">查看我的课程</el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: "payres",
  data() {
    return {
      title: "支付结果"
    };
  },
  methods: {}
};
</script>


<style lang="less" scoped>
* {
  font-size: 0.14rem;
}
.pay {
  background: #ffffff;
}
.header {
  background: #ffffff;
  height: 0.8rem;
  overflow: hidden;
  border-bottom: 1px solid #f8f8f8;
  .headerImg {
    height: 0.8rem;
    img {
      width: 0.3rem;
      height: 0.5rem;
      overflow: hidden;
      margin-top: 0.15rem;
      float: right;
    }
    // background: red;
  }
  .headerTitle {
    font-size: 0.26rem;
    line-height: 0.8rem;
    text-align: center;
    font-weight: 600;
  }
}
.payres {
  // background: red;
  margin-top: 2rem;
  .payImg {
    width: 1rem;
    height: 1rem;
  }
}
.lookmore{
    // background: red;
    margin-top: 3rem;
    .lookbtn{
        height: 0.72rem;
        background: #ff3d65;
        text-align: center;
        line-height: 0.72rem;
        font-size: 0.24rem;
        color: white;
        border-radius: 0.35rem

    }
}
</style>